<template>
  <div style="display:flex">
    <div style="width:15%">
      <a-anchor class="maodian">
        <a-anchor-link href="#jbxs" title="基本信息" />
        <a-anchor-link href="#jsl" title="家属栏" />
        <a-anchor-link href="#chqk" title="查获情况及前科" />
        <a-anchor-link href="#qtbz" title="其他备注" />
      </a-anchor>
    </div>
    <div style="width:85%">
      <a-form-model layout="vertical" ref="ruleForm" :rules="rules" :model="model" >
        <p class="pt1" id="jbxs">基本信息</p>
          <z-form-item :datas="fieldArr" :rules="rules" :form="model" :gutter="72" @change="getChange">
            <!--//自定义头像上传-->
            <template slot="slots-avatar">
              <j-image-upload bizPath="scott/pic" v-model="model.avatar" />
            </template>
          </z-form-item>
        <a-form-model-item label="婚姻状况" prop="marriage">
          <a-radio-group name="radioGroup" v-model="model.marriage">
            <a-radio :value="1">未婚</a-radio>
            <a-radio :value="2">已婚</a-radio>
            <a-radio :value="3">离婚</a-radio>
            <a-radio :value="4">丧偶</a-radio>
            <a-radio :value="5">复婚</a-radio>
            <a-radio :value="6">再婚</a-radio>
            <a-radio :value="7">初婚</a-radio>
            <a-radio :value="8">未说明的婚姻状况</a-radio>
          </a-radio-group>
        </a-form-model-item >
        <a-form-model-item label="健康状况（是否患有疾病）" prop='healthSituation'>
            <a-radio-group name="radioGroup1" v-model="model.healthSituation">
              <a-radio :value="1">是</a-radio>
              <a-radio :value="2">否</a-radio>
            </a-radio-group>
        </a-form-model-item>
        <a-form-model-item label="文化程度" prop="education">
            <a-radio-group name="radioGroup2" v-model="model.education">
            <a-radio :value="1">小学</a-radio>
            <a-radio :value="2">初中</a-radio>
            <a-radio :value="3">高中</a-radio>
            <a-radio :value="4">中专</a-radio>
            <a-radio :value="5">大专</a-radio>
            <a-radio :value="6">本科</a-radio>
            <a-radio :value="7">本科以上</a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item label="从业状况" prop="workSituation">
            <a-radio-group name="radioGroup2" v-model="model.workSituation">
            <a-radio :value="1">国家公务员</a-radio>
            <a-radio :value="2">专业技术人员</a-radio>
            <a-radio :value="3">职员</a-radio>
            <a-radio :value="4">企业管理人员</a-radio>
            <a-radio :value="5">工人</a-radio>
            <a-radio :value="6">农民</a-radio>
            <a-radio :value="7">学生</a-radio>
            <a-radio :value="8">现役军人</a-radio>
            <a-radio :value="9">自由职业者</a-radio>
            <a-radio :value="10">个体经营者</a-radio>
            <a-radio :value="11">无业人员</a-radio>
            <a-radio :value="12">退（离）休人员</a-radio>
            <a-radio :value="13">其他</a-radio>
          </a-radio-group>
        </a-form-model-item>

        <z-form-item :datas="fieldArr1" :rules="rules" :form="model" :gutter="72" @change="getChange">        
        </z-form-item>




        <div class="plan-item">
          <p class="pt" id="jsl">家属栏<span style="font-size:12px">（请至少添加一条记录）</span></p>
          <!-- <div class="column-title" :title="`已添加 ${editingFKey===''?FamilyDatas.length: FamilyDatas.length - 1}人`">  </div> -->
          <a-table :columns="FamilyColumns" :data-source="FamilyTable" >
            <template
              slot="Intimacy"
              slot-scope="text, record"
            >
              <div>
              <a-form-model-item  :prop="record.key+'Intimacy'" v-if="record.editable">
              <a-select  style="width: 120px;margin: -5px 0"
                :value="text"
                @change="e => handleChange(e, record.key,'Intimacy')"
                placeholder="请选择"
                default-value="1"
                v-model="model[record.key+'Intimacy']"
              >
              <!-- :v-model="model.record.key+'Intimacy'" -->
              <a-select-option value="1">
                一般亲密
              </a-select-option>
              <a-select-option value="2">
                密切的关系
              </a-select-option>
              <a-select-option value="3">
                离婚
              </a-select-option>
              <a-select-option value="4">
                疏离
              </a-select-option>
              <a-select-option value="5">
                有冲突关系
              </a-select-option>
            </a-select>
          </a-form-model-item>
                <template v-else>
                  {{ text==1?'一般亲密':text==2?'密切的关系':text==3?'离婚':text==4?'疏离':
                   text==5?'有冲突关系':''}}
                </template>
              </div>
            </template>

            <template
              slot="familyRelation"
              slot-scope="text, record"
            >
              <div>
                <a-form-model-item  :prop="record.key+'familyRelation'" v-if="record.editable">
              <a-select  style="width: 120px;margin: -5px 0"
                :value="text"
                @change="e => handleChange(e, record.key,'familyRelation')"
                placeholder="请选择"
                v-model="model[record.key+'familyRelation']"
              >
              <a-select-option value="1">
                夫妻
              </a-select-option>
              <a-select-option value="2">
                父子
              </a-select-option>
              <a-select-option value="3">
                父女
              </a-select-option>
              <a-select-option value="4">
                母子
              </a-select-option>
              <a-select-option value="5">
                母女
              </a-select-option>
              <a-select-option value="6">
                儿子
              </a-select-option>
              <a-select-option value="7">
                女儿
              </a-select-option>
              <a-select-option value="8">
                兄弟
              </a-select-option>
              <a-select-option value="9">
                兄妹
              </a-select-option>
              <a-select-option value="10">
                姐弟
              </a-select-option>
              <a-select-option value="11">
                姐妹
              </a-select-option>
              <a-select-option value="12">
                其他
              </a-select-option>
            </a-select>
          </a-form-model-item>
                <template v-else>
                  {{ text==1?'夫妻':text==2?'父子':text==3?'父女':text==4?'母子'
                  :text==5?'母女':text==6?'儿子':text==7?'女儿':text==8?'兄弟':text==9?'兄妹'
                  :text==10?'姐弟':text==11?'姐妹':text==12?'其他':''}}
                </template>
              </div>
            </template>

            <template
              v-for="col in ['name', 'address','workUnit','phone']"
              :slot="col"
              slot-scope="text, record"
            >
              <div :key="col">
                <a-form-model-item  :prop="record.key+col" v-if="record.editable">
                <a-input
                  style="margin: -5px 0"
                  :value="text"
                  @change="e => handleChange(e.target.value, record.key, col)"
                  placeholder="请输入"
                  v-model="model[record.key+col]"
                />
              </a-form-model-item>
                <template v-else>
                  {{ text }}
                </template>
              </div>
            </template>
            <template slot="operation" slot-scope="text, record">
              <div class="editable-row-operations">
                <span v-if="record.editable">
                  <a @click="() => save(record.key)" style="margin-right:10px">保存</a>
                  <a-popconfirm title="确定取消吗?" @confirm="() => cancel(record.key)">
                    <a>取消</a>
                  </a-popconfirm>
                </span>
                <span v-else>
                  <a :disabled="editingKey !== ''" @click="() => edit(record.key)" style="margin-right:10px">编辑</a>
                  <a-popconfirm
                  v-if="FamilyTable.length"
                  title="确定删除吗?"
                  @confirm="() => onDelete(record.key)"
                >
                  <a href="javascript:;" :disabled="editingKey !== ''">删除</a>
                </a-popconfirm>
                </span>
              </div>
            </template>
          </a-table>
          <a-button block size="large" @click="handleAdd"  style="margin-top:20px;"> +添加 </a-button>
        </div>

        <div class="plan-item">
          <p class="pt" id="chqk">查获情况及前科</p>
          <a-table :columns="SeizedColumns" :data-source="SeizedTable" >
            <template
              slot="seizedDate"
              slot-scope="text, record"
            >
              <div>
                <a-form-model-item  :prop="record.key+'seizedDate'" v-if="record.editable">
                <a-date-picker
                  style="margin: -5px 0"
                  :value="text"
                  @change="e => handleChange1(e, record.key,'seizedDate')"
                  v-model="model[record.key+'seizedDate']"
                />
              </a-form-model-item>
                <template v-else>
                  <div v-if="!text || text == 'NaN-NaN-NaN'"></div>
                  <div v-else>{{ timestampToTime(text)}}</div>
                </template>
              </div>
            </template>
            <template
              v-for="col in ['seizedUnit', 'caseCategory', 'investigationResults']"
              :slot="col"
              slot-scope="text, record"
            >
              <div :key="col">
                <a-form-model-item  :prop="record.key+col" v-if="record.editable">
                <a-input
                  style="margin: -5px 0"
                  :value="text"
                  @change="e => handleChange1(e.target.value, record.key, col)"
                  placeholder="请输入"
                  v-model="model[record.key+col]"
                />
              </a-form-model-item>
                <template v-else>
                  {{ text }}
                </template>
              </div>
            </template>
            <template slot="operation1" slot-scope="text, record">
              <div class="editable-row-operations">
                <span v-if="record.editable">
                  <a @click="() => save1(record.key)" style="margin-right:10px">保存</a>
                  <a-popconfirm title="确定取消吗?" @confirm="() => cancel1(record.key)">
                    <a>取消</a>
                  </a-popconfirm>
                </span>
                <span v-else>
                  <a :disabled="editingKey1 !== ''" @click="() => edit1(record.key)" style="margin-right:10px">编辑</a>
                  <a-popconfirm
                  v-if="SeizedTable.length"
                  title="确定删除吗?"
                  @confirm="() => onDelete1(record.key)"
                >
                  <a href="javascript:;" :disabled="editingKey1 !== ''">删除</a>
                </a-popconfirm>
                </span>
              </div>
            </template>
          </a-table>
          <a-button block size="large" @click="handleAdd1"  style="margin-top:20px;"> +添加 </a-button>
        </div>

          <p class="pt" id="qtbz">其他备注</p>
          <a-form-model-item label="备注" prop="bztext">
              <a-input  type="textarea" v-model="model.bztext" />
          </a-form-model-item>
      </a-form-model>
    </div>
  </div>
</template>

<script>
import { queryDepartByArea } from '@/api/api'
// import EditableCell from './editableCell'
// import {details} from '@/api/sjsk/reportList'
const FamilyColumns = [
  {
    title: '家属关系',
    dataIndex: 'familyRelation',
    // width: '25%',
    scopedSlots: { customRender: 'familyRelation' },
    prop:'familyRelation'
  },
  {
    title: '家属姓名',
    dataIndex: 'name',
    // width: '15%',
    scopedSlots: { customRender: 'name' },
    prop:'name'
  },
  {
    title: '亲密关系',
    dataIndex: 'Intimacy',
    // width: '40%',
    scopedSlots: { customRender: 'Intimacy' },
  },
  {
    title: '家属实际居住地',
    dataIndex: 'address',
    // width: '40%',
    scopedSlots: { customRender: 'address' },
  },
  {
    title: '家属工作单位',
    dataIndex: 'workUnit',
    // width: '40%',
    scopedSlots: { customRender: 'workUnit' },
  },
  {
    title: '家属电话',
    dataIndex: 'phone',
    // width: '40%',
    scopedSlots: { customRender: 'phone' },
  },
  {
    title: '操作',
    width: '15%',
    dataIndex: 'operation',
    scopedSlots: { customRender: 'operation' },
  },
];
const SeizedColumns = [
  {
    title: '查获时间',
    dataIndex: 'seizedDate',
    // width: '25%',
    scopedSlots: { customRender: 'seizedDate' },
  },
  {
    title: '查获单位',
    dataIndex: 'seizedUnit',
    // width: '15%',
    scopedSlots: { customRender: 'seizedUnit' },
  },
  {
    title: '案件类别',
    dataIndex: 'caseCategory',
    // width: '40%',
    scopedSlots: { customRender: 'caseCategory' },
  },
  {
    title: '查处结果',
    dataIndex: 'investigationResults',
    // width: '40%',
    scopedSlots: { customRender: 'investigationResults' },
  },
  {
    title: '操作',
    dataIndex: 'operation1',
    scopedSlots: { customRender: 'operation1' },
  },
];
const FamilyTable = [];
const SeizedTable = [];
export default {
  // components: { EditableCell },
  props: ['current', 'controlPersonType', 'value','result','huancun'],
  data() {
    this.cacheData = FamilyTable.map(item => ({ ...item }));
    this.cacheData1 = SeizedTable.map(item => ({ ...item }));
    return {
      FamilyTable,
      SeizedTable,
      FamilyColumns,
      SeizedColumns,
      editingKey: '',
      editingKey1: '',
      count:0,
      count1:200,


      model: {
        
        // socialDrugKeywordLists:[]
      },
      fieldArr: [
        {label: '头像上传', prop: 'avatar'},
        {label: '人员类型', prop: 'personType', tagType: 'dict-select', dictOptions:[{text:'社戒',value:'1'},{text:'社康',value:'2'}], span: 6
        ,dictOptions: [{ text: '社区戒毒', value:'1'},{ text: '社区康复', value:'2'}], disabled: true},
        {label: '姓名', prop: 'realName', tagType: 'input', span: 6,disabled: true},
        {label: '绰号/别名', prop: 'nickName', tagType: 'input', span: 6},
        {label: '性别', prop: 'sex', tagType: 'dict-select', dictCode:'sex', span: 6,disabled: true},
        {label: '出生日期', prop: 'birthday', tagType: 'date-picker', format: 'YYYY-MM-DD', span: 6,disabled: true},
        {label: '身高（cm）', prop: 'height', tagType: 'input', span: 6},
        {label: '民族', prop: 'nation', tagType: 'dict-select', dictCode:'nation', span: 6,disabled: true},
        {label: '身份证号', prop: 'identityCard', tagType: 'input', span: 6,disabled: true},
        // {label: '风险类别', prop: 'riskCategory', tagType: 'dict-select', dictCode:'risk_category', span: 6},
        {label: '手机号码', prop: 'phone', tagType: 'input', span: 6},   
        // {label: '文化程度', prop: 'education', tagType: 'dict-select', dictCode:'degreeEducation', span: 6},
        // {label: '其他证件类型', prop: 'otherCertificateType', tagType: 'dict-select', dictCode:'other_certificate_type', span: 6},
        {label: '其他证件及号码', prop: 'otherIdentityCard', tagType: 'input', span: 6,disabled: true},
        // {label: '婚姻状况', prop: 'marriage', tagType: 'dict-select', dictCode:'marriage', span: 6},
        
        {label: '工作单位', prop: 'workUnit', tagType: 'input', span: 6},
        {label: '单位电话', prop: 'workphone', tagType: 'input', span: 6},
        {label: '户籍地详址', prop: 'householdAddress', tagType: 'input', span: 6,disabled: true},
        {label: '户籍地派出所', prop: 'householdPoliceStation', tagType: 'input', span: 6,disabled: true},
        {label: '居住地详址', prop: 'currentAddress', tagType: 'input', span: 6,disabled: true},
        {label: '居住地派出所', prop: 'currentPoliceStation', tagType: 'input', span: 6,disabled: true},
        // {label: '初次吸毒时间', prop: 'firstDrugTime', tagType: 'date-picker', format: 'YYYY-MM-DD', span: 6,},
      ],
      fieldArr1: [       
        {label: '初次吸毒时间', prop: 'firstDrugTime', tagType: 'date-picker',format: 'YYYY-MM-DD',span: 6,disabled: true},
        {label: '滥用毒品方式', prop: 'drugWays', tagType: 'dict-multi-tag', dictCode:'drug_ways', type:'checkbox'},
        {label: '滥用毒品种类', prop: 'drugType', tagType: 'dict-multi-tag', dictCode:'drug_type', type:'checkbox'},
      ],
      
      prisonsTypeOptions: [],
      prisonsNameOptions: [
        {key: '1', title: '测试'},
        {key: '2', title: '测2试'},
      ],
      rules: {
        // 头像上传
        avatar: [{ required: true, message: '请上传头像', trigger: 'change' },],
        personType: [ { required: true, message: '请选择', trigger: 'change' }, ],
        realName: [ { required: true, message: '请输入', trigger: 'change' }, ],
        nickName: [ { required: true, message: '请输入', trigger: 'change' }, ],
        otherIdentityCard: [ { required: true, message: '请选择', trigger: 'change' }, ],
        workUnit: [ { required: true, message: '请输入', trigger: 'change' }, ],
        sex: [ { required: true, message: '请选择', trigger: 'change' }, ],
        birthday: [ { required: true, message: '请选择', trigger: 'change' }, ],
        
        workphone: [ { required: true, message: '请输入', trigger: 'change' }, ],
        height: [ { required: true, message: '请输入', trigger: 'change' }, ],
        nation: [ { required: true, message: '请选择', trigger: 'change' }, ],
        country: [ { required: true, message: '请选择', trigger: 'change' }, ],
        identityCard: [ { required: true, message: '请输入', trigger: 'change' }, ],
        
        phone: [ { required: true, message: '请输入', trigger: 'change' }, ],
        houseLevels: [ { required: true, message: '请选择', trigger: 'change' }, ],
        householdAddress: [ { required: true, message: '请输入', trigger: 'change' }, ],
        householdPoliceStation: [ { required: true, message: '请输入', trigger: 'change' }, ],
        currentLevels: [ { required: true, message: '请选择', trigger: 'change' }, ],
        currentAddress: [ { required: true, message: '请输入', trigger: 'change' }, ],
        currentPoliceStation: [ { required: true, message: '请选择居住地地区', trigger: 'change' }, ],
        
        healthStatus: [ { required: true, message: '请选择', trigger: 'change' }, ],
        isJoinMedicineTreatment: [ { required: true, message: '请选择', trigger: 'change' }, ],
        isIntoRecurePlace: [ { required: true, message: '请选择', trigger: 'change' }, ],
        firstDrugDate: [ { required: true, message: '请选择', trigger: 'change' }, ],
        riskCategory: [ { required: true, message: '请选择', trigger: 'change' }, ],
        isResorption: [ { required: true, message: '请选择', trigger: 'change' }, ],
        abstinenceDrugTimes: [ { required: true, message: '请输入', trigger: 'change' }, ],
        controlLevel: [ { required: true, message: '请选择', trigger: 'change' }, ],
        outDate: [ { required: true, message: '请选择', trigger: 'change' }, ],
        drugWays: [ { required: true, message: '请选择', trigger: 'change' }, ],
        drugType: [ { required: true, message: '请选择', trigger: 'change' }, ],

        marriage: [ { required: true, message: '请选择', trigger: 'change' }, ],
        healthSituation: [ { required: true, message: '请选择', trigger: 'change' }, ],
        education: [ { required: true, message: '请选择', trigger: 'change' }, ],
        workSituation: [ { required: true, message: '请选择', trigger: 'change' }, ],
        bztext: [ { required: true, message: '请选择', trigger: 'change' }, ],
        firstDrugTime: [ { required: true, message: '请选择', trigger: 'change' }, ],
        aaa: [ { required: true, message: '请选择', trigger: 'blur' }, ],

        socialDrugKeywordLists: [
          { required: true, type:'array', message: '请选择', trigger: 'change' },
          { validator: this.socialDrugLists }
        ]
      },
      columnsRules: {
        familyRelation:[ { required: true, message: '请选择家属关系' }],
        name:[ { required: true, message: '请输入家属姓名' }],
        Intimacy:[ { required: true, message: '请选择亲密关系' }],
        address:[ { required: true, message: '请输入实际居住地' }],
        workUnit:[ { required: true, message: '请输入工作单位' }],
        // planTime:[ { required: true, type: 'array', message: '请选择计划时间' }],
        phone:[ { required: true, message: '请输入家属电话' }],
        // taskVolume:[ { required: true, message: '请输入任务量' }],
        // telphone:[ 
        //   { required: true, message: '请输入联系方式' },
        //   { reg: /^(\+86)?1[3456789]\d{9}$/, message: '请输入正确的联系方式' },
        // ],
        // identification:[ 
        //   { required: true, message: '请输入身份证号' },
        //   { reg: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '请输入正确的身份证号' },
        // ],
      },
    }
  },
  
  watch: {
    model:{
      deep:true,
      handler(val){
        this.SociaFormModel(val)
      }
    },
    FamilyTable:{
      deep:true,
      handler(val){
        this.FamilyTabledata(val)
      }
    },
    SeizedTable:{
      deep:true,
      handler(val){
        this.SeizedTabledata(val)
      }
    },
    huancun:{
      deep:true,
      handler(val){
        // console.log(val.sjskPersonAddVO.baseFamilyList);
        if(val.sjskPersonAddVO.sjskPersonInfoVO){
          this.model = val.sjskPersonAddVO.sjskPersonInfoVO
        }
        this.FamilyTable = val.sjskPersonAddVO.baseFamilyList?val.sjskPersonAddVO.baseFamilyList:[]
        this.SeizedTable = val.sjskPersonAddVO.sjskOtherCriminalRecordList?val.sjskPersonAddVO.sjskOtherCriminalRecordList:[]
      }
    },
  },
  async mounted() {
    this.initTabTypes()
    console.log(this.huancun);
    // console.log(this.result);
    // if(this.huancun){
    //   this.model = this.huancun
    //   this.FamilyTable = this.huancun
    //   this.SeizedTable = this.huancun
    // }
    // else{this.model = this.result}
    this.model = this.result
    // console.log(this.id);
    // console.log(this.model);

    // await this.refreshTable()

    // this.FamilyTable = []
    // this.SeizedTable = []
  },
  
  methods: {
    timestampToTime(timestamp) {
      if (timestamp === 0 || timestamp == null) {
        return ''
      } 
      else {
        var date = new Date(Date.parse(timestamp))
        var Y = date.getFullYear() + '-'
        var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
        var D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
        return Y + M + D
      }
    },
    SociaFormModel(val){
      this.$emit('SociaFormModel',val)
    },
    FamilyTabledata(val){
      this.$emit('FamilyTabledata',val)
    },
    SeizedTabledata(val){
      for(let i=0;i<val.length;i++){
        val[i].seizedDate = this.timestampToTime(val[i].seizedDate)
      }
      this.$emit('SeizedTabledata',val)
    },
   
    handleChange(value, key, column) {
      const newData = [...this.FamilyTable];
      const target = newData.find(item => key === item.key);
      if (target) {
        target[column] = value;
        this.FamilyTable = newData;
      }
    },
    handleChange1(value, key, column) {
      const newData = [...this.SeizedTable];
      const target = newData.find(item => key === item.key);
      if (target) {
        target[column] = value;
        this.SeizedTable = newData;
      }
    },
    edit(key) {
      const newData = [...this.FamilyTable];
      const target = newData.find(item => key === item.key);
      this.editingKey = key;
      if (target) {
        target.editable = true;
        this.FamilyTable = newData;
      }
      console.log(key);
    },
    edit1(key) {
      const newData = [...this.SeizedTable];
      const target = newData.find(item => key === item.key);
      this.editingKey1 = key;
      if (target) {
        target.editable = true;
        this.SeizedTable = newData;
      }
    },
    save(key) {
      this.$nextTick(() => {
          this.$refs.ruleForm.validate((valid) => {
            if (valid) {
              const newData = [...this.FamilyTable];
              const newCacheData = [...this.cacheData];
              const target = newData.find(item => key === item.key);
              const targetCache = newCacheData.find(item => key === item.key);
              if (target && targetCache) {
                delete target.editable;
                this.FamilyTable = newData;
                Object.assign(targetCache, target);
                this.cacheData = newCacheData;
              }
              this.editingKey = '';
            } 
            else { return false;}
          })
        })
      
      
    },
    save1(key) {
      this.$nextTick(() => {
          this.$refs.ruleForm.validate((valid) => {
            if (valid) {
              const newData = [...this.SeizedTable];
              const newCacheData = [...this.cacheData1];
              const target = newData.find(item => key === item.key);
              const targetCache = newCacheData.find(item => key === item.key);
              if (target && targetCache) {
                delete target.editable;
                this.SeizedTable = newData;
                Object.assign(targetCache, target);
                this.cacheData1 = newCacheData;
              }
              this.editingKey1 = '';
            } 
            else { return false;}
          })
        })
      
      
    },
    cancel(key) {
      const newData = [...this.FamilyTable];
      const target = newData.find(item => key === item.key);
      this.editingKey = '';
      if (target) {
        Object.assign(target, this.cacheData.find(item => key === item.key));
        delete target.editable;
        this.FamilyTable = newData;
      }

    },
    cancel1(key) {
      const newData = [...this.SeizedTable];
      const target = newData.find(item => key === item.key);
      this.editingKey1 = '';
      if (target) {
        Object.assign(target, this.cacheData1.find(item => key === item.key));
        delete target.editable;
        this.SeizedTable = newData;
      }
    },
    onDelete(key){
      this.FamilyTable = this.FamilyTable.filter(item => item.key !== key);
    },
    onDelete1(key){
      this.SeizedTable = this.SeizedTable.filter(item => item.key !== key);
    },
    handleAdd() {
      this.$nextTick(() => {
          this.$refs.ruleForm.validate((valid) => {
            if (valid) {
              this.count = this.FamilyTable.length
              const newData = {
                key: this.count,
              };
              this.FamilyTable.unshift(newData)
              this.cacheData = this.FamilyTable.map(item => ({ ...item }));
              this.edit(this.count)
              this.rules[this.count+'Intimacy'] = [ { required: true, message: '请选择', trigger: 'blur' } ]
              this.rules[this.count+'familyRelation'] = [ { required: true, message: '请选择', trigger: 'blur' } ]  
              this.rules[this.count+'name'] = [ { required: true, message: '请输入', trigger: 'blur' } ]
              this.rules[this.count+'address'] = [ { required: true, message: '请输入', trigger: 'blur' } ]
              this.rules[this.count+'workUnit'] = [ { required: true, message: '请输入', trigger: 'blur' } ]
              this.rules[this.count+'phone'] = [ { required: true, message: '请输入', trigger: 'blur' } ]  
              this.count = this.count + 1;
            } 
            else { 
              alert('执行此操作前请先将表单/表格填写完毕');
              return false;
            }
          })
        })
      
    },
    handleAdd1() {
      this.$nextTick(() => {
          this.$refs.ruleForm.validate((valid) => {
            if (valid) {
              this.count1 = this.SeizedTable.length+200 
              const newData = {
                key: this.count1,
              };
              this.SeizedTable.unshift(newData)
              this.cacheData1 = this.SeizedTable.map(item => ({ ...item }));
              this.edit1(this.count1)
              this.rules[this.count1+'seizedDate'] = [ { required: true, message: '请选择', trigger: 'blur' } ]
              this.rules[this.count1+'seizedUnit'] = [ { required: true, message: '请输入', trigger: 'blur' } ]
              this.rules[this.count1+'caseCategory'] = [ { required: true, message: '请输入', trigger: 'blur' } ]
              this.rules[this.count1+'investigationResults'] = [ { required: true, message: '请输入', trigger: 'blur' } ]
              console.log(this.rules);
              console.log(this.model);
              this.count1 = this.count1 + 1;
            } 
            else { 
              alert('执行此操作前请先将表单/表格填写完毕');
              return false; 
            }
          })
        })
    },
    
    
    getChange(prop, value) {
      if(prop==='riskCategory') {
        this.$set(this.model, 'controlLevel', value)
        this.$refs['ruleForm'].validateField('controlLevel')
      }
      if(prop==='houseLevels') {
        let lastData = value.length>0?value[value.length-1]:''
        let flastData = value.length>0?value[value.length-2]:''
        this.$set(this.model, 'houseLevel', value.toString())
        this.$set(this.model, 'houseDepartmentId', lastData)
        if(value && value.length===5) this.getQueryDepartByArea(flastData, 'houseLevel')
      }
      if(prop==='currentLevels') {
        let lastData = value.length>0?value[value.length-1]:''
        let flastData = value.length>0?value[value.length-2]:''
        this.$set(this.model, 'currentLevel', value.toString())
        this.$set(this.model, 'currentDepartmentId', lastData)
        if(value && value.length===5) this.getQueryDepartByArea(flastData, 'currentLevel')
      }
    },
    // 通过执行社区筛选派出所信息
    getQueryDepartByArea(code, field) {
      queryDepartByArea({type: 2, code})
        .then(res => {
          if (res.success) {
            const { result } = res
            if(result && Object.keys(result).length>0 && result.departName) {
              let departName = result.departName
              if(field==='houseLevel')this.$set(this.model, 'householdPoliceStation', departName)
              if(field==='currentLevel')this.$set(this.model, 'currentPoliceStation', departName)
            }
          } else {
            this.$message.warn(res.message)
          }
        })
        .catch(e => {
          this.$message.warn('请求失败！')
        })
    },
    // 初始化字典项
    initTabTypes() {
      this.$initDictOptions('prisons_type').then((res) => {
        if (res.success) {
          this.prisonsTypeOptions = res.result.map(item=> {
            return {
              title: item.label,
              key: Number(item.value)
            }
          })
        }
      })
    },
    
  }
}
</script>

<style scoped lang="less">
// .maodian{
//   position: absolute;
//   top:200px;
//   left:130px
// }
.pt {
    font-weight: bold;
   
    border-bottom: 1px solid rgb(181, 176, 176);
    padding-bottom: 20px;
    
    margin-top: 50px;
    margin-bottom: 30px;
    font-size: 20px;
  }
.pt1 {
    font-weight: bold;
    font-size: 20px;
    
    border-bottom: 1px solid rgb(181, 176, 176);
    padding-bottom: 20px;
   
    margin-top: 20px;
    margin-bottom: 30px;
  }
.slots-checkbox{
  :deep(&.ant-checkbox-group) {
    .ant-checkbox-wrapper {
      display: flex;
      align-items: center;
      margin-bottom: 16px;
      margin-left: 0;
      .label {
        width: 200px;
        display: inline-block;
      }
      .ant-calendar-picker {
        width: 240px;
        flex: 0 0 240px;
      }
      .ant-select {
        flex: 0 0 200px;
      }
      
    }
  }
}
</style>
